<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .icon {
        width: 200px;
        height: 200px;
        fill: skyblue;
        stroke-width: 3px;
        stroke: green;
      }
    </style>
  </head>
  <body>
    <!-- svg图标的使用方式:
          1. 直接当成图片进行引入 src引入
          2. 直接用svg标签进行展示

         区别: 
          第1种, src引入的方式, 需要发送请求获取图片
          第2种, 整个svg标签就是图片, 无需请求  (小图标推荐, 节约请求次数, 减轻服务器压力)

         svg图标语法:
          svg图概念: 矢量图, 散点图

         svg属性:
          width  图标宽度
          height 图标高度
          fill   图标填色
          viewBox 必须加了该属性, svg图才会跟着盒子的大小等比例缩放
          viewBox="0 0 400 400" => 前两个参数 x y 的偏移量, 后两个参数 svg 原图的宽高

         通过class控制样式:
          width
          height
          fill 填充颜色
          stroke 描边颜色 => 注意path如果设置死了stroke, 这边css中会没效果
          stroke-width 描边宽度
    -->
    <!-- <img src="./user.svg" alt=""> -->

    <svg class="icon" width="1000" height="1000" fill="pink" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
      />
    </svg>

    <svg class="icon" width="1000" height="1000" fill="pink" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
      />
    </svg>

  </body>
</html>
